<template>
    <div class="modal fade" id="checkMobileModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<h4 class="modal-title" id="myModalLabel"> 号码验真</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
					<div class="form-group">
						<label class="col-md-9 control-label">该号码尚未验真,点击发送短信验证码进行验真</label>
					</div>
					<div class="qf-input-box">
                        <div class="input-icon fl">
                            <div class="input-icon-img2"></div>
                        </div>
                        <div class="qf-input fl" style="width:150px">
                            <input type="text" name="password" v-model="params.checkCode" placeholder="请输入验证码">
                        </div>
                        <div class="fl" style="width:100px; margin-top: 6px; line-height: 30px;">
                            <button class="validate-btn"  @click="sendCode" v-bind:disabled="codeDis">{{verificationCode}}</button>
                        </div>
                    </div>
	            </div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="checkCode">确定</button>
				<button type="button" class="btn btn-default" v-show="btnShow" @click="canel">取消</button>
          	</div>
        </div>
      </div>
    </div>
</template>
<style scoped>
	.remindUpload li{margin-top: 8px;}
    .remindUpload .file-upload{width: 100%;height: 80px;padding:10px;}
</style>
<script>
	export default{
		//接收父组件的绑定值
		props: ["checkMobileProps"],
		data() {
			return {
                verificationCode:'发送验证码',
				params: {
                    id:'',
					checkCode: ''
                },
                codeDis:false,
				btnShow: true
			}
		},
		methods: {
            sendCode(){
                var _self = this;
                _self.params.id = this.checkMobileProps.id;
                if(!_self.params.id){
                    layer.msg("报备记录错误,请重新打开!");
                    return;
                }
                //设置不能点击
                _self.codeDis = "disabled";
                var body = {};
                var params = {
                    id:_self.params.id,
                };
                body.params = params;
                var url = this.utilHelper.apiUrl+'/api/sendMobileCheckCode';
                _self.$http.post(url,body).then((response) => {
                    var body = response.body;
                    if(body.result == 1){
                        layer.alert(body.resData.resultMsg,{icon:6});
                        _self.verificationCodeTimer(false);
                    }else{
                        _self.codeDis = false;
                        layer.alert(body.resData.resultMsg,{icon:5});
                    }
                }),(response => {
                    _self.codeDis = false;
                    layer.alert("发送短信异常",{icon:5});
                });
            },
            //短信验证码定时器
            verificationCodeTimer:function(flag){
                var _self = this;
                var date = 0;
                if(flag){//页面刷新，或重进入时
                    if(window.sessionStorage.getItem("checkMobileDate")){//若缓存中不存在数据则 不进行倒计时
                        date =  window.sessionStorage.getItem("checkMobileDate");
                        if(window.sessionStorage.getItem("checkMobileObj")){
                            _self.params.id = window.sessionStorage.getItem("checkMobileObj");
                        }
                    }else{
                        return;
                    }
                }else{
                    //点击发送按钮时
                    date = new Date().getTime() +1000*30;
                    window.sessionStorage.setItem("checkMobileDate", date);
                    window.sessionStorage.setItem("checkMobileObj", _self.params.id);
                    _self.timer = 40;
                }

                _self.codeDis = "disabled";
                var code = setInterval(function(){
                    _self.timer = Math.ceil((date - new Date().getTime())/1000);//向上取整数
                    if(_self.timer <= 0 ){
                        window.sessionStorage.removeItem("checkMobileDate");
                        window.sessionStorage.removeItem("checkMobileObj");
                        _self.verificationCode = '发送验证码';
                        _self.codeDis = false;
                        window.clearInterval(code);
                    }else{
                        _self.verificationCode = _self.timer + 'S';
                        _self.timer-=1;
                    }
                },1000);
            },
            checkCode(){
                var _self = this;
                var body = {};
                var params = {
                    id: _self.checkMobileProps.id,
                    checkCode: _self.params.checkCode
                };
                if(!_self.params.checkCode){
                    layer.msg("请输入验证码");
                    return;
                }

                body.params = params;
                var url = this.utilHelper.apiUrl+'/api/checkMobileCheckCode';
                _self.$http.post(url,body).then((response) => {
                    var body = response.body;
                    if(body.result == 1){
                        layer.msg("号码验真成功");
                        _self.params.checkCode = '';
						$('#checkMobileModal').modal('hide');
                        _self.$emit('saveCheckMobileListener', _self.checkMobileProps.type);
                    }else {
                        layer.msg("号码验真失败: " + body.resData.resultMsg);
                    }
                }),(response => {
                    _self.params.checkCode = '';
                    _self.codeDis = false;
                    layer.alert("验真异常",{icon:5});
                });
            },
			canel:function(){
                $('#checkMobileModal').modal('hide');
            },
			init(){
				this.params.createTime= new Date();
                this.followType='';
                this.params.remark='';
                this.editVisitTime = true;
			}
		}
	}
	
</script>